<template>
  <!--  面包屑导航-->
  <el-breadcrumb separator=">">
    <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>订单管理</el-breadcrumb-item>
    <el-breadcrumb-item>订单列表</el-breadcrumb-item>
  </el-breadcrumb>
  <!--卡片视图区域-->
  <el-card>
    <!--搜索框查询区域-->
    <el-row :gutter="4">
      <el-col :span="8">
        <el-input placeholder="请输入内容" v-model="orderInfo.query" clearable @clear="getOrderList">
          <template #append>
            <el-button class="iconfont icon-fenxiang" @click="getOrderList"></el-button>
          </template>
        </el-input>
      </el-col>
    </el-row>

    <!--订单数据展示区域-->
    <el-table :data="orderList" border stripe>
      <el-table-column type="index"></el-table-column>
      <el-table-column label="订单编号" prop="order_number"></el-table-column>
      <el-table-column label="订单价格" prop="order_price"></el-table-column>
      <el-table-column label="订单地址" prop="consignee_addr"></el-table-column>
      <el-table-column label="是否支付" prop="order_pay">
        <template v-slot="scope">
          <el-tag v-if="scope.row.order_pay === '1'">已支付</el-tag>
          <el-tag v-else>未支付</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="是否发送" prop="is_send"></el-table-column>
      <el-table-column label="操作">
        <template v-slot="scope">
          <el-tooltip class="box-item" effect="dark" content="修改地址" placement="top" :enterable="false">
            <el-button type="primary" class="iconfont icon-edit" @click="editOrderAddressVisible = true"></el-button>
          </el-tooltip>
          <el-tooltip class="box-item" effect="dark" content="查看物流" placement="top" :enterable="false">
            <el-button type="success" class="iconfont icon-star" @click="checkLogisticVisible = true"></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <!--分页器区域-->
    <el-pagination
        v-model:currentPage="orderInfo.pagenum"
        v-model:page-size="orderInfo.pagesize"
        :page-sizes="[10, 20, 30, 40]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="orderTotal"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    >
    </el-pagination>
    <!--修改地址对话框-->
    <el-dialog v-model="editOrderAddressVisible" title="修改地址" @close="closedEditAddressDialogResetForm">
      <el-form ref="editOrderAddressFormRef" :model="editOrderAddressForm" :rules="editOrderAddressRules">
        <el-form-item label="省市区/县" prop="address">
          <el-cascader
              v-model="editOrderAddressForm.address"
              :options="cityData"
              :props="addressProps"
          ></el-cascader>
        </el-form-item>
        <el-form-item label="详细地址" prop="address1">
          <el-input placeholder="请输入详细地址" v-model="editOrderAddressForm.address1"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="editOrderAddressVisible = false">取消</el-button>
        <el-button type="primary" @click="editOrderAddressVisible = false">确认</el-button>
      </span>
      </template>
    </el-dialog>
    <!--查看物流对话框-->
    <el-dialog v-model="checkLogisticVisible" title="查看物流">
      <el-timeline>
        <el-timeline-item
            v-for="(item, index) in logisticList"
            :key="index"
            :timestamp="item.time"
        >
          {{ item.context }}
        </el-timeline-item>
      </el-timeline>
    </el-dialog>

  </el-card>
</template>

<script setup lang="ts">
import {ILogistic, IOrderListInfo} from '@/util/interface'
import {reactive, ref} from 'vue'
import {GetLogistic, GetOrderList} from '@/api'
import {ElForm, ElMessage} from 'element-plus'
import cityData from '@/util/cityData'
// 获取订单数据的接口参数
const orderInfo: IOrderListInfo = reactive({
  query: '',
  pagenum: 1,
  pagesize: 10,
})
// 订单数据存放的列表
const orderList = ref([])
// 订单总数
const orderTotal = ref(0)
// 获取订单数据的方法
const getOrderList = async ()=>{
  const {data: res} = await GetOrderList(orderInfo)
  console.log(res)
  if(res.meta.status !== 200){return ElMessage.error('获取订单数据失败')}
  orderList.value = res.data.goods
  orderTotal.value = res.data.total
}
getOrderList()
// 分页器事件
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
  getOrderList()
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
  getOrderList()
}
// 编辑地址对话框
const editOrderAddressVisible = ref(false)
// 编辑地址对话框表单数据
const editOrderAddressForm = reactive({
  address: [],
  address1: ''
})
// 编辑地址对话框表单验证规则
const editOrderAddressRules = reactive({
  address:[
    {required: true, message: '请选择省市区/县', trigger: 'blur'}
  ],
  address1: [
    {required: true, message: '请输入详细地址', trigger: 'blur'}
  ]
})
// 编辑地址对话框省市区/县 级联选择器配置项
const addressProps = {
  value: 'value',
  label: 'label',
  children: 'children',
  expandTrigger: 'hover'
}
// 编辑地址对话框表单引用对象
const editOrderAddressFormRef = ref<InstanceType<typeof ElForm>|null>(null)
// 关闭对话框重置表单
const closedEditAddressDialogResetForm = ()=>{
  editOrderAddressFormRef.value?.resetFields()
}
// 查看物流对话框
const checkLogisticVisible = ref(false)
// 物流信息列表
const logisticList = ref<ILogistic[]>([])
// 获取物流信息
const getLogistic = async ()=>{
  const{data: res} = await GetLogistic()
  console.log(res)
  if(res.meta.status !== 200){return ElMessage.error('获取物流信息失败')}
  logisticList.value = res.data
  ElMessage.success('获取物流信息成功')
}
getLogistic()

</script>

<style lang="less" scoped>

</style>